<template>
	<swiper class="swiper" :options="options">
		<swiper-slide class="swiper-slide" v-for="(item,index) in list" :key="index">
			<img class="swiper-image" :src="item"/>
		</swiper-slide>
		<div class="swiper-pagination"  slot="pagination"></div>
		<div class="swiper-button-prev" slot="button-prev"></div>
		<div class="swiper-button-next" slot="button-next"></div>
	</swiper>
</template>

<script>
export default{
	name: 'MySwiper',
	props:{
		list:{
			type: Array,
			default: () => []
		},
		options:{
			type: Object,
			default: () => ({
				pagination: {
					el: '.swiper-pagination'
				},
				navigation: {
					nextEl: '.swiper-button-next', 
					prevEl: '.swiper-button-prev'
				},
				autoplay: {
					delay: 5000,
					disableOnInteraction: false
				},
				loop: true
			})
		}
	}
}
</script>

<style scoped lang="less">
.swiper{
	width: 100%;
	.swiper-slide{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
</style>
